import React, { Component }  from "react"
import ReactDOM from 'react-dom'


// class App1 extends React.Component {
//   // 初始化状态
//   state = {
//     comments: [
//       // { id: 1, name: 'jack', content: '沙发！！！' },
//       // { id: 2, name: 'rose', content: '板凳~' },
//       // { id: 3, name: 'tom', content: '楼主好人' }
//     ],

//     // 评论人
//     userName: '',
//     // 评论内容：
//     userContent: ''
//   }
//   // 渲染评论列表：
//   renderList() {
//     const { comments } = this.state

//     if (comments.length === 0) {
//       return <div className="no-comment">暂无评论，快去评论吧~</div>
//     }

//     return (
//       <ul>
//         {comments.map(item => (
//           <li key={item.id}>
//             <h3>评论人：{item.name}</h3>
//             <p>评论内容：{item.content}</p>
//           </li>
//         ))}
//       </ul>
//     )
//   }

//   // 处理表单元素值
//   handleForm = e => {
//     const { name, value } = e.target

//     this.setState({
//       [name]: value
//     })
//   }

//   // 发表评论：
//   addComment = () => {
//     const { comments, userName, userContent } = this.state

//     // 非空校验
//     if (userName.trim() === '' || userContent.trim() === '') {
//       alert('请输入评论人和评论内容')
//       return
//     }

//     // 将评论信息添加到state中
//     const newComments = [
//       {
//         id: Math.random(),
//         name: userName,
//         content: userContent
//       },
//       ...comments
//     ]

//     // 文本框的值如何清空？ 要清空文本框只需要将其对应的state清空即可
//     this.setState({
//       comments: newComments,
//       userName: '',
//       userContent: ''
//     })
//   }

//   render() {
//     const { userName, userContent } = this.state

//     return (
//       <div className="app">
//         <div>
//           <input
//             className="user"
//             type="text"
//             placeholder="请输入评论人"
//             value={userName}
//             name="userName"
//             onChange={this.handleForm}
//           />
//           <br />
//           <textarea
//             className="content"
//             cols="30"
//             rows="10"
//             placeholder="请输入评论内容"
//             value={userContent}
//             name="userContent"
//             onChange={this.handleForm}
//           />
//           <br />
//           <button onClick={this.addComment}>发表评论</button>
//         </div>

//         {/* 通过条件渲染决定渲染什么内容： */}
//         {this.renderList()}
//       </div>
//     )
//   }
// }

// class App extends React.Component{

//   state={
//     count:0
//   }
//   render(){
//     return(
//       <div>
//         <p>{this.state.count}</p>
//         <button onClick={()=>{
//           this.setState({
//             count:this.state.count+1
//           })
//         }}>+1</button>
//       </div>
//     )
//   }
// }

// class A  extends React.Component{
//   //搜索框
//  render(){
//   console.log(this.props)
//   return(
//     <div>
//       <h1>{this.props.name}</h1>
//       {this.props.fn()}
//       <h1>{this.props.tag}</h1>
//     </div>
//   )
//  }
// }
// class B extends React.Component{
//   //数据展示要根据搜索的内容进行展示
// }
// // const Person = (props) =>{
// //   console.log(props)
// //   return(
// //     <div>
// //       <h1>props:{props.name}</h1>
// //     </div>
// //   )
// // }

// // ReactDOM.render(<A 
// // name="张三"
// // person={["age:18","name","sex"]} 
// // fn={()=>console.log("props传递函数")} 
// // tag={<p>这是props传递的JSX</p>}/>,document.getElementById("root"))

// // class Father extends React.Component{
// //   state={
// //     name:'wang',
// //     age:18
// //   }
// //   render(){
// //     return(
// //       <div className="father">
// //         父组件：{this.state.name}
// //         <Child name={this.state.name}/>
// //       </div>
// //     )
// //   }
// // }
// // class Child extends React.Component{
// //   state={

// //   }
// //   render(){
// //     return(
// //       <div className="child">
// //         接收父组件的值：
// //         {this.props.name}
// //       </div>
// //     )
// //   }
// // }
// // class Father extends React.Component{
// //   state={
// //     father:''
// //   }
// //     //回调函数
// //     getchildMsg=(data)=>{
// //       console.log("接收到的子组件的值：",data)
// //       this.setState({
// //         father:data
// //       })
// //     }
// //     render(){
// //       return(
// //         <div className="child">
// //             父组件：{this.state.father}
// //             <br/>
// //             <Child getMsg={this.getchildMsg}/>
// //         </div>
// //       )
// //     }
// // }
// // class Child extends React.Component{
// //   state={
// //     msg:"把这个数据传递给父组件"
// //   }
// //   clickBtn = ()=>{
// //     //调用父组件传递过来的回调函数
// //     this.props.getMsg(this.state.msg)
// //   }
// //   render(){
// //     return(
// //       <button onClick={this.clickBtn}>向父组件传递数据</button>
// //     )
// //   }
// // }
// class Father extends React.Component{
//   //提供共享状态
//   state={
//     count:0
//   }
//   //提供修改状态的方法
//   countAdd = ()=>{
//     this.setState({
//       count:this.state.count +1
//     })
//   }
//   render(){
//     return(
//       <div>
//         <Child1 count={this.state.count}/>
//         <Child2 countAdd={this.countAdd}/>
//       </div>
//     )
//   }
// }

// class Child1 extends React.Component{
//       render(){
//         return(
//           <div>
//             <h1>数字：{this.props.count}</h1>
//           </div>
//         )
//       }
// }

// class Child2 extends React.Component{
// cAdd = ()=>{
//   this.props.countAdd()
// }
//   render(){
//     return(
//       <div>
//         <button onClick={this.cAdd}>+1</button>
//       </div>
//     )
//   }
// }
// // ReactDOM.render(<Father/>,document.getElementById("root"))

// class AA extends React.Component{
//   state={
//     count:0
//   }
//   //使用props关键字获取组件属性的数据
//   //写一个文本框 输入要搜索的数据
//   render(){
//     return(
//       <div>
//         {this.props.name}
//       </div>
//     )
//   }

// }
// const Fn= (props)=>{
//  console.log( props)
//  return(
//    <div>
//      {props.name}
//      {props.age}
//      {props.fn()}
//      {props.tag}
//    </div>
//  )

//   //展示A组件中输入内容相关的信息
// }

// ReactDOM.render(<Fn name="小明" 
// age={18}
// person={["name","age","sex"]}
// fn={()=>console.log("props传递的函数表达式")}
// tag={<h1>这是props传递的JSX表达式</h1>}/>,

// document.getElementById("root"))

//父子组件之间的通信 指的是父组件的值被孩子组件使用
// class Father extends React.Component{
// //父组件中要写个回调函数 接收数据 将该函数作为属性的值传递给子组件
// state={
//   childMsg:''
// }

// getMsg=(...data)=>{
//   console.log(data)
//   //这里是一个回调函数
//   this.setState({
//     childMsg:data
//   })
// }
//   render(){
//     return(
//       <div>
//         父组件接收的值 {this.state.childMsg}
//         <br/>
//         <Child getChileMsg={this.getMsg}></Child>
//       </div>
//     )
//   }
// }
// class Child extends React.Component{
//   state={
//       msg:"子组件传给你的值",
//       name:"熊王",
//       age:18
//   }
//   childBtn=()=>{
//     this.props.getChileMsg(this.state.msg,this.state.name,this.state.age)
//   }
//   render(){
//     return(
//       <button onClick={this.childBtn}>点一下，给爸爸数据</button>
//     )
//   }
// }

// class Child1 extends  React.Component{
//   //数字
//   render(){
//     return(
//       <div>
//         <h1>数字：{this.props.count}</h1>
//       </div>
//     )
//   }

// }
// class Child2 extends  React.Component{
//   //按钮的部分写在这里
//   cBtn=()=>{
//     this.props.cAdd()
//   }
//   render(){
//     return(
//       <div>
//         <button onClick={this.cBtn}>+1</button>
//       </div>
//     )
//   }
// }

// class Father extends  React.Component{
  
//   state={
//     count:0
//   }
//   countAdd = ()=>{
//     this.setState({
//       count:this.state.count+1
//     })
//   }
//   render(){
//     return(
//       <div>
//         <Child1 count={this.state.count}/>
//         <Child2 cAdd={this.countAdd}/>
//       </div>
//     )
//   }
// }
// ReactDOM.render(<Father/>,document.getElementById("root"))


//组件之间的通信
//props 

// class A extends React.Component{
//   render(){
//     return(
//       //props
//     <div>{this.props.name}
//     {this.props.age}
//     {this.props.fn()}
//     {this.props.tag}
    
//     </div>
//     )
//   }
// }


// ReactDOM.render(<A name="小明"
// age={18}
// person={["1","2","3"]}
// fn={()=>{return "这是一个函数属性"}}
// tag={<h1>JSX属性</h1>}
// />,document.getElementById("root"))

//子父组件之间的通信--回调函数
// class Father extends React.Component{
//   state={
//     msg:''
//   }
//   //定义一个回调函数
//   fn=(...data)=>{
//     console.log(data)
//     this.setState({
//       msg:data[1]
//     })
//   }
//   render(){
//     return(
//       <div>
//         {this.state.msg}
//         <br/>
//         <Child getChildMsg={this.fn}/>
//       </div>
//     )
//   }
// }
// class Child extends React.Component{
//   state={
//     msg:"把这个值传递给父亲",
//     age:18
//   }
//   btnClick=()=>{
//     this.props.getChildMsg(this.state.msg,this.state.age)
//   }
//   render(){
//     return(
//       <button onClick={this.btnClick}>点击把值传递给爸爸</button>
//     )
//   }
// }
// ReactDOM.render(<Father/>,document.getElementById("root"))

/**
 * 组件通信
//  */
// class Child1 extends React.Component{
  
//   render(){
//     return(
// <h1>显示数字：{this.props.count}</h1>
//     )
//   }
// }
// class Child2 extends React.Component{
 
//   countAdd=()=>{
//     this.props.add();
//   }
//  render(){
//    return(
//      <button onClick={this.countAdd}>+1</button>
//    )
//  }
// }

// class Father extends React.Component{
  
// state={
//   count:0
// }
// countAdd=()=>{
//   this.setState({
//     count:this.state.count+1
//   })
// }
// render(){
//   return (
//     <div>
//       <Child1 count={this.state.count}/>
//       <br/>
//       <Child2 add={this.countAdd}/>
//     </div>
//   )
// }
// }

// ReactDOM.render(<Father/>,document.getElementById("root"))